<template>
  <el-dialog v-el-drag-dialog title="个人中心" :visible.sync="visible" :append-to-body="appendToBody" width="850px" :before-close="onClose">
    <div v-if="user">
      <el-row :gutter="10">
        <el-col :span="6" :xs="24">
          <user-card :user="user" />
        </el-col>
        <el-col :span="18" :xs="24">
          <el-card>
            <el-tabs v-model="activeTab">
              <el-tab-pane label="基本信息" name="basicinfo">
                <user-info :user-info="user" />
              </el-tab-pane>
              <el-tab-pane label="修改密码" name="repassword">
                <user-repassword :user="user" />
              </el-tab-pane>
              <el-tab-pane label="社交信息" name="socialinfo">
                <user-social ref="userSocial" :user="user" />
              </el-tab-pane>
              <el-tab-pane label="个性签名" name="signature">
                <user-sign ref="userSign" :user="user" />
              </el-tab-pane>
              <el-tab-pane label="个人简历" name="resume">
                <user-resume :user="user" />
              </el-tab-pane>
            </el-tabs>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex'
import UserCard from './components/UserCard'
import UserInfo from './components/UserInfo'
import UserRepassword from './components/UserRepassword'
import UserSocial from './components/UserSocial'
import UserSign from './components/UserSign'
import UserResume from './components/UserResume'

export default {
  name: 'Profile',
  components: { UserCard, UserInfo, UserRepassword, UserSocial, UserSign, UserResume },
  props: {
    appendToBody: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      visible: false,
      activeTab: 'basicinfo'
    }
  },
  computed: {
    ...mapGetters([
      'user'
    ])
  },
  watch: {
    activeTab(value) {
      if (value === 'signature') {
        this.$nextTick(() => {
          this.$refs.userSign.loadForm()
        })
      } else if (value === 'socialinfo') {
        this.$nextTick(() => {
          this.$refs.userSocial.loadData()
        })
      }
    }
  },
  methods: {
    init() {
      this.visible = true
    },
    onClose() {
      this.activeTab = 'basicinfo'
      this.visible = false
    }
  }
}
</script>
